const { join, resolve } = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 压缩css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: "production",
    output: {
        assetModuleFilename: "images/[name].[contenthash:8].bundle.[ext]",
        filename: "scrpts/[name].[contenthash:8].bundle.js",
        publicPath: "/assets"
    },
    optimization: {
        minimize: true,
        runtimeChunk: {
            name: "runtime"
        },
        splitChunks: {
            chunks: "async",
            minChunks: 3,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: false,
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    name: "commons"
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            },
            minSize: {
                javascript: 10000,
                style: 1000,
            }
        },
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: "hooome",
            filename: "index.html",
            template: resolve(__dirname, "../src/index-prod.html"),
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {
                preset: [
                    "default",
                    {
                        discardComments: {
                            removeAll: true
                        }
                    }
                ]
            }
        })
    ]  
}